<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery demonstration</title>
<script type="text/javascript" src="content/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("table#hover tbody tr").each(function(index) {
		$(this).find("td:eq(1)").text($(this).find("td:eq(0)").css("fontFamily"));
			// document.defaultView.getComputedStyle(document.getElementById("id"),null).getPropertyValue("font-family")
			$(this).find("td:eq(2)").text($(this).find("td:eq(0)").get(0).style.fontFamily);
		});
		$("table#hover tbody tr td").hover(function() {
			$(this).addClass("yellow");
		}, function() {
			$(this).removeClass("yellow");
		});
		$("a#hide").click(function(event) {
			event.preventDefault();
			$("table#hover").hide("slow");
		});
		$("a#show").click(function(event) {
			event.preventDefault();
			$("table#hover").show("slow");
		});
		$("a#toggle").click(function(event) {
			event.preventDefault();
			$("table#hover").toggle("slow");
		});
		$("a#slide-toggle").click(function(event) {
			event.preventDefault();
			$("table#hover").slideToggle("slow", function() {});
		});
		$("a#animate").toggle(function() {
			$("table#hover").animate({opacity: '0.2', left: '+=100'}, "slow");
		}, function() {
			$("table#hover").animate({opacity: '1.0', top: '+=20'}, "slow");
		}, function() {
			$("table#hover").animate({opacity: '0.2', left: '-=100'}, "slow");
		}, function() {
			$("table#hover").animate({opacity: '1.0', top: '-=20'}, "slow");
		});
	});
</script>
<style type="text/css">
.yellow {
	background-color: yellow;
}
</style>
</head>
<body>
	<h3>jQuery hide and show, toggle, animate</h3>
	<p>Click to <a id="hide" href="">hide</a>,
	<a id="show" href="">show</a>,
	<a id="toggle" href="">toggle</a>,
	<a id="slide-toggle" href="">slide-toggle</a>,
	<a id="animate" href="">animate</a> above table.</p>
	<h3>jQuery addClass() and removeClass()</h3>
	<table id="hover" border="1" style="position: relative; height: 150pt; width: 400pt;">
		<thead>
			<tr>
				<th>Style (Font)</th>
				<th>Computed style</th>
				<th>Element style</th>
			</tr>
		</thead>
		<tbody style="font-family: serif;">
			<tr>
				<td style="font-family: monospace;">font-family: monospace</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td style="font-family: inherit;">font-family: inherit</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>No inline style</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</tbody>
	</table>
</body>
</html>